<template>
	<view class="container">
		<!-- 标签导航 -->
		<view class="tabs-container">
			<view v-for="tab in tabs" :key="tab.id" class="tab-item" :class="{ 'active': currentTab === tab.id }"
				@click="currentTab = tab.id">
				<text class="tab-text">{{ tab.label }}</text>
				<view class="indicator"></view>
			</view>
		</view>

		<!-- 订单内容 -->
		<scroll-view class="content-container" scroll-y>
			<!-- 加载状态 -->
			<view v-if="isLoading" class="loading-state">
				<uni-icons type="spinner-cycle" size="28" color="#FF6B6B" class="loading-icon"></uni-icons>
				<text class="loading-text">加载订单中...</text>
			</view>

			<!-- 空状态 -->
			<view v-else-if="activeOrders.length === 0" class="empty-state">
				<!-- <image src="/static/empty-order.png" class="empty-image"></image> -->
				<text class="empty-text">{{ emptyText }}</text>
			</view>

			<!-- 订单列表 -->
			<template v-else>
				<view v-for="order in activeOrders" :key="order.orderId" class="order-card"
					:class="statusClass[order.status]" @click="handleOrderClick(order)">
					<!-- 订单头部 -->
					<view class="order-header">
						<text class="order-time">{{ order.orderTime }}</text>
						<view class="status-badge">{{ order.status }}</view>
					</view>

					<!-- 餐厅信息 -->
					<view class="restaurant-info">
						<text class="name">{{ order.restaurantName }}</text>
						<view class="location">
							<uni-icons type="location-filled" size="14" color="#999"></uni-icons>
							<text>{{ order.campusName }} {{ order.canteenName }}</text>
						</view>
					</view>

					<!-- 商品列表 -->
					<view class="items-container">
						<view v-for="item in order.items" :key="item.id" class="item-card">
							<image class="item-image" :src="item.imageUrl || '/static/food-placeholder.png'"
								mode="aspectFill"></image>
							<view class="item-info">
								<text class="item-name">{{ item.name }}</text>
								<view class="item-meta">
									<text class="quantity">x{{ item.quantity }}</text>
									<text class="price">¥{{ item.price }}</text>
								</view>
								<view class="evaluate" @click="openEvaluation(order.orderId , item.itemId)"
									v-if="currentTab === 'completed'">评价</view>
							</view>
						</view>
					</view>

					<!-- 订单底部 -->
					<view class="order-remark" v-if="order.remark && order.remark.length">备注：{{order.remark}}</view>
					<view class="order-remark" v-if="order.activity">活动：{{order.activity}}</view>
					<view class="order-footer">
						<view class="left-info">
							<template v-if="currentTab === 'pending'">
								<uni-icons type="barcode" size="16" color="#666"></uni-icons>
								<text class="pickup-code">{{ order.pickUpCode }}</text>
							</template>
							<template v-else-if="currentTab === 'preparing'">
								<uni-icons type="clock" size="16" color="#666"></uni-icons>
								<text class="time">{{ order.estimatedTime }}</text>
							</template>
							<template v-else>
								<uni-icons type="checkmark" size="16" color="#666"></uni-icons>
								<text class="time">{{ order.completedTime }}</text>
								<!-- <view class="evaluate" @click="openEvaluation(order.orderId)">进行评价</view> -->
							</template>
						</view>
						<view class="total-price">
							<text>总计: </text>
							<text class="price">¥{{ order.totalPrice }}</text>
						</view>
					</view>
				</view>
			</template>
		</scroll-view>

		<evaluation-dialog :visible="showEvaluation" :order-id="currentOrderId" :item-id="currentItemId"
			@update:visible="val => showEvaluation = val" @submit="handleSubmitEvaluation" />
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		watch
	} from 'vue';
	import {
		onShow
	} from "@dcloudio/uni-app";
	import {
		queryOrder
	} from '../../request/api.js';
	import {
		EvaluationDialog
	} from '../../components/evaluate.vue'

	// 响应式数据
	const currentTab = ref('pending');
	const isLoading = ref(true);
	const tabs = [{
			id: 'pending',
			label: '待取餐'
		},
		{
			id: 'preparing',
			label: '制作中'
		},
		{
			id: 'completed',
			label: '已完成'
		}
	];

	// 状态样式映射
	const statusClass = {
		'待取餐': 'status-pending',
		'制作中': 'status-preparing',
		'已完成': 'status-completed'
	};

	// 计算属性
	const activeOrders = computed(() => {
		switch (currentTab.value) {
			case 'pending':
				return pendingOrders.value;
			case 'preparing':
				return preparingOrders.value;
			case 'completed':
				return completedOrders.value;
			default:
				return [];
		}
	});

	const emptyText = computed(() => {
		return {
			'pending': '暂无待取餐订单',
			'preparing': '当前没有制作中的订单',
			'completed': '暂无历史订单'
		} [currentTab.value];
	});

	// 方法
	const handleOrderClick = (order) => {
		// uni.navigateTo({
		// 	url: `/subpackage/foodDetail/index?id=${order.orderId}`
		// });
	};

	// 数据初始化（保持原有逻辑）
	const pendingOrders = ref([]);
	const preparingOrders = ref([]);
	const completedOrders = ref([]);
	const showEvaluation = ref(false)
	const currentOrderId = ref('')
	const currentItemId = ref('')

	const openEvaluation = (orderId, itemId) => {
		console.log(orderId, itemId, 'Ids')
		currentOrderId.value = orderId
		currentItemId.value = itemId
		showEvaluation.value = true
	}

	const handleSubmitEvaluation = (data) => {
		console.log('提交的评价数据:', data)
		// 这里处理提交逻辑
	}

	const init = async () => {
		try {
			await querypendingOrders();
			isLoading.value = false;
		} catch (error) {
			uni.showToast({
				title: '数据加载失败',
				icon: 'none'
			});
			isLoading.value = false;
		}
	};

	watch(currentTab, async (newVal) => {
		isLoading.value = true;
		try {
			if (newVal === 'pending') await querypendingOrders();
			else if (newVal === 'preparing') await querypreparingOrders();
			else await querycompletedOrders();
		} catch (error) {
			uni.showToast({
				title: '数据加载失败',
				icon: 'none'
			});
		}
		isLoading.value = false;
	});

	onShow(init);

	// 保持原有数据请求方法
	const querypendingOrders = async () => {
		const temp = await queryOrder('待取餐')
		pendingOrders.value = temp.orders;
	}

	const querypreparingOrders = async () => {
		const temp = await queryOrder('制作中')
		preparingOrders.value = temp.orders;
	}

	const querycompletedOrders = async () => {
		const temp = await queryOrder('已完成')
		completedOrders.value = temp.orders;
	}
</script>

<style scoped>
	/* 颜色变量 */
	:root {
		--primary: #FF6B6B;
		--secondary: #6B8EFF;
		--success: #4CAF50;
		--text-primary: #333;
		--text-secondary: #666;
		--border-color: #eee;
		--bg-color: #f8f9fa;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background: var(--bg-color);
	}

	/* 标签导航 */
	.tabs-container {
		display: flex;
		background: #fff;
		padding: 0 20px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	}

	.tab-item {
		flex: 1;
		padding: 18px 0;
		position: relative;
		text-align: center;
	}

	.tab-text {
		font-size: 16px;
		color: var(--text-secondary);
		transition: color 0.2s;
	}

	.tab-item.active .tab-text {
		color: var(--primary);
		font-weight: 500;
	}

	.indicator {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 24px;
		height: 3px;
		background: var(--primary);
		border-radius: 2px;
		opacity: 0;
		transition: opacity 0.2s;
	}

	.tab-item.active .indicator {
		opacity: 1;
	}

	/* 订单内容 */
	.content-container {
		flex: 1;
		overflow: hidden;
	}

	/* 订单卡片 */
	.order-card {
		background: #fff;
		border-radius: 12px;
		margin-bottom: 16px;
		padding: 16px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
		transition: transform 0.2s;
	}

	.order-card:active {
		transform: scale(0.98);
	}

	/* 状态指示 */
	.status-pending .status-badge {
		background: #FFF3E0;
		color: #FF9800;
	}

	.status-preparing .status-badge {
		background: #E3F2FD;
		color: #2196F3;
	}

	.status-completed .status-badge {
		background: #E8F5E9;
		color: var(--success);
	}

	.order-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 12px;
	}

	.order-time {
		font-size: 12px;
		color: var(--text-secondary);
	}

	.status-badge {
		padding: 4px 10px;
		border-radius: 20px;
		font-size: 12px;
		font-weight: 500;
	}

	/* 餐厅信息 */
	.restaurant-info {
		margin-bottom: 16px;
	}

	.restaurant-info .name {
		font-size: 18px;
		font-weight: 600;
		color: var(--text-primary);
		margin-bottom: 4px;
	}

	.location {
		display: flex;
		align-items: center;
		font-size: 12px;
		color: var(--text-secondary);
	}

	/* 商品项 */
	.items-container {
		border-bottom: 1px dashed var(--border-color);
		margin-bottom: 12px;
		padding-bottom: 12px;
	}

	.item-card {
		display: flex;
		margin-bottom: 12px;
	}

	.item-image {
		width: 80px;
		height: 80px;
		border-radius: 8px;
		margin-right: 12px;
	}

	.item-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.item-name {
		font-size: 16px;
		color: var(--text-primary);
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.item-meta {
		display: flex;
		justify-content: space-between;
		font-size: 14px;
		color: var(--text-secondary);
	}

	/* 订单底部 */
	.order-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.left-info {
		display: flex;
		align-items: center;
		gap: 6px;
		font-size: 14px;
		color: var(--text-secondary);
	}

	.total-price {
		font-size: 16px;
		color: var(--text-primary);
	}

	.total-price .price {
		font-weight: 600;
		color: var(--primary);
	}

	/* 加载状态 */
	.loading-state {
		padding: 40px 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.loading-icon {
		animation: rotate 1s linear infinite;
		margin-bottom: 8px;
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	/* 空状态 */
	.empty-state {
		padding: 40px 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.empty-image {
		width: 120px;
		height: 120px;
		opacity: 0.6;
		margin-bottom: 16px;
	}

	.order-remark {
		font-size: 14px;
		color: var(--text-secondary);
		padding: 0px 0px 10px 10px;
	}

	.evaluate {
		margin-left: 83%;
	}
</style>